<template>
    <div id="contentCon">
        <ul>
            <li class="right">
                <a href="#">概述</a>
                <a href="#">图集</a>
                <a href="#" class="pingjia">评价</a>
            </li>
        </ul>
        <div id="show">
            <div>
                <ul class="small-pic-wrapper">
                    <li class="" v-for="pic in goodsData.pictures" :class="{selected:currentPic == pic}"
                        @mouseenter="currentPic = pic">
                        <img :src="pic" alt="">
                    </li>
                </ul>
                <div class="big-image-wrapper fl">
                    <img :src="currentPic" alt="">
                </div>

            </div>
            <div class="right" style="width: 480px">
                <p>{{ goodsData.name }}</p>
                <p style="font-size: 12px;color:#e00;">{{ goodsData.description }}</p>
                <div>
                    <ul>
                        <span>¥</span>
                        <h2>{{ (goodsData.price / 100).toFixed(2) }}</h2>
                        <p>（降价通知）</p>
                    </ul>
                    <ol>
                        <a href="#" class="tehui">特惠</a>
                        <a href="#">领取满150减15元券，先到先得</a>
                    </ol>
                    <li>
                        <p>服务</p>
                        <div>
                            <span>.</span>
                            <p>满88元包邮</p>
                            <span>.</span>
                            <p>不支持无理由货</p>
                            <span>.</span>
                            <p>48小时极速退款</p>
                        </div>
                    </li>
                </div>
                <ul>
                    <li class="check01">
                        <p>规格</p>
                        <span>18寸蛋糕</span>
                        <span>14寸蛋糕</span>
                        <span>杯盛蛋糕</span>
                    </li>
                    <li>
                        <span>小蛋糕</span>
                        <span>双心蛋糕</span>
                    </li>
                    <ol>
                        <p>数量</p>
                        <el-input-number :min="1" :max="goodsData.stock" v-model="buyCount" size="medium"
                                         style="width: 120px"/>
                    </ol>
                    <div style="margin-top: 30px">
                        <button class="buy" @click="buy">立刻购买</button>
                        <button class="car">加入购物车</button>
                        <a href="#" class="love"></a>
                    </div>
                </ul>
            </div>
        </div>
        <div id="details" v-html="goodsData.content"></div>
    </div>
</template>

<script>
import GoodsImage from "../components/GoodsImage.vue";

export default {
    name: "Detail",
    components: {GoodsImage},
    data() {
        return {
            buyCount: 1,
            currentPic: null,
            id: 1,
            goodsData: {
                pictures: [],
                content: "",
                description: "",
                isNew: 0,
                isRecommend: 1,
                name: "",
                picture: "",
                price: 0,
                recommendPicture: "",
                stock: 0
            }
        }
    },
    mounted() {
        window.document.title = '数据加载中...'
        this.id = this.$route.query.id;
        fetch('http://localhost:12345/goods/detail?id=' + this.id)
            .then(res => res.json())
            .then(result => {
                window.document.title = result.name
                result.pictures = JSON.parse(result.pictures)
                this.goodsData = result
                this.currentPic = result.pictures[0]
                console.log(result)
            })
            .catch(err => {
                console.log(err)
                // 跳转到 错误页
                alert('商品数据不存在')
            })
    },
    methods: {
        buy() {
            fetch('http://localhost:12345/order/buy?id=' + this.id + '&count=' + this.buyCount,{
                headers:{
                    token:'test'
                }
            }).then(res => res.json())
                .then(result => {
                    if(result.code){
                        if(result.message == 'need login'){
                        alert('请先登录')
                        }else{
                            alert(result.message)
                        }
                    }else{
                        alert('提交订单成功，请立即支付')
                    }
                })
                .catch(err => {
                    console.log(err)
                    // 跳转到 错误页
                    alert('购买出错')
                })
        }
    }
}
</script>

<style scoped lang="less">
.big-image-wrapper {
    float: left;
    width: 548px;
    height: 486px;
    margin-left: 10px;

    img {
        width: 548px;
        height: 486px;
    }
}

.small-pic-wrapper {
    li {
        margin: 5px 0;
        border: solid 2px transparent;

        img {
            width: 144px;
            height: 114px;
        }

        &:first-child {
            margin-top: 0;
        }

        &:last-child {
            margin-bottom: 0;
        }

        &.selected {
            border-color: #f00;
        }
    }
}

/*内容*/
#contentCon {
    width: 1200px;
    margin: auto;
}

#contentCon > ul {
    width: 1200px;
    margin: auto;
    margin-top: 30px;
    overflow: hidden;
}

#contentCon > ul > li {
    float: left;
    font-size: 24px;
    color: #4c4c4c;
}

#contentCon > ul > .right {
    float: right;
    font-size: 18px;
    color: #4c4c4c;
    margin-left: 10px;
}

#contentCon > ul > .right > a {
    display: inline-block;
    width: 65px;
    height: 18px;
    border-right: 1px solid #d2d2d2;
    font-size: 18px;
    color: #4c4c4c;
    text-align: center;
    line-height: 18px;
}

#contentCon > ul > .right > a:hover {
    color: #fb0000;
}

#contentCon > ul > .right > .pingjia {
    border: none;
}

#contentCon > #show {
    overflow: hidden;
    margin-top: 80px;
}

#contentCon > #show > div {
    float: left;
    overflow: hidden;
}

#contentCon > #show > div > ul {
    float: left;
}

#contentCon > #show > div > ul > li {
    width: 144px;
    height: 114px;
    background: url(../images/xiangqing_03.jpg) center no-repeat;
}

#contentCon > #show > div > ul > .pic02 {
    background: url(../images/xiangqing_08.jpg) center no-repeat;
    margin: 10px 0;
}

#contentCon > #show > div > ul > .pic03 {
    background: url(../images/xiangqing_11.jpg) center no-repeat;
    margin: 10px 0;
}

#contentCon > #show > div > ul > .pic04 {
    background: url(../images/xiangqing_14.jpg) center no-repeat;
}

#contentCon > #show > div > ol {
    float: left;
    width: 548px;
    height: 486px;
    background: url(../images/xiangqing_05.jpg) center no-repeat;
    margin-left: 10px;
}

#contentCon > #show > .right {
    float: right;
}

#contentCon > #show > .right > p {
    font-size: 24px;
    color: #4c4c4c;
    margin-left: 20px;
}

#contentCon > #show > .right > div {
    width: 476px;
    height: 160px;
    background: #eee;
    margin-top: 20px;
}

#contentCon > #show > .right > div > ul {
    overflow: hidden;
    padding-top: 20px;
}

#contentCon > #show > .right > div > ul > span {
    font-size: 24px;
    color: #fb0000;
    float: left;
    margin: 5px 10px 0 20px;
}

#contentCon > #show > .right > div > ul > h2 {
    font-size: 30px;
    color: #fb0000;
    float: left;
    font-weight: normal;
}

#contentCon > #show > .right > div > ul > p {
    font-size: 14px;
    color: #4c4c4c;
    margin-left: 18px;
    margin-top: 14px;
}

#contentCon > #show > .right > div > ol {
    margin-top: 20px;
    margin-left: 20px;
    overflow: hidden;
}

#contentCon > #show > .right > div > ol > .tehui {
    display: inline-block;
    width: 54px;
    height: 26px;
    background: #fb0000;
    color: #fff;
    line-height: 26px;
    text-align: center;
    font-size: 18px;
    border-radius: 4px;
    margin: 0;
}

#contentCon > #show > .right > div > ol > a {
    font-size: 16px;
    color: #fb0000;
    margin-left: 22px;
}

#contentCon > #show > .right > div > li {
    overflow: hidden;
    margin-top: 20px;
    margin-left: 20px;
}

#contentCon > #show > .right > div > li > p {
    float: left;
    font-size: 16px;
    color: #4c4c4c;
    margin-right: 24px;
}

#contentCon > #show > .right > div > li > div {
    overflow: hidden;
    margin-left: 22px;
}

#contentCon > #show > .right > div > li > div > span {
    font-size: 24px;
    color: #4c4c4c;
    float: left;
    margin-top: -13px;
    margin-right: 5px;
    margin-left: 8px;
}

#contentCon > #show > .right > div > li > div > p {
    float: left;
    font-size: 14px;
    color: #4c4c4c;
}

#contentCon > #show > .right > ul {
    margin-top: 28px;
    margin-left: 18px;
}

#contentCon > #show > .right > ul > li {
    overflow: hidden;
    background: none;
    width: 360px;
    height: 50px;
    margin-left: 28px;
}

#contentCon > #show > .right > ul > .check01 {
    margin: 0;
    overflow: hidden;
}

#contentCon > #show > .right > ul > li > p {
    float: left;
    font-size: 14px;
    color: #4c4c4c;
    margin-top: 8px;
}

#contentCon > #show > .right > ul > li > span {
    width: 82px;
    height: 32px;
    border: 1px solid #d2d2d2;
    line-height: 32px;
    text-align: center;
    color: #4c4c4c;
    font-size: 14px;
    float: left;
    margin-left: 20px;
}

#contentCon > #show > .right > ul > ol {
    margin-top: 20px;
    overflow: hidden;
}

#contentCon > #show > .right > ul > ol > p {
    float: left;
    font-size: 14px;
    color: #4c4c4c;
    margin-top: 5px;
    margin-right: 20px;
}

#contentCon > #show > .right > ul > ol > a {
    float: left;
    width: 26px;
    height: 32px;
    font-size: 24px;
    color: #999;
    border: 1px solid #d2d2d2;
    text-align: center;
    line-height: 32px;
}

#contentCon > #show > .right > ul > ol > input {
    float: left;
    width: 32px;
    height: 32px;
    outline: none;
    border-top: 1px solid #d2d2d2;
    border-bottom: 1px solid #d2d2d2;
    border-left: none;
    border-right: none;
    color: #4c4c4c;
    padding-left: 24px;
    font-size: 14px;
}

#contentCon button {
    border: none;
    cursor: pointer;
}

#contentCon > #show > .right > ul .buy {
    width: 132px;
    height: 40px;
    background: #fb0000;
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    border-radius: 8px;
}

#contentCon > #show > .right > ul .car {
    width: 132px;
    height: 40px;
    border: 1px solid #fb0000;
    color: #fb0000;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    border-radius: 8px;
    margin-left: 20px;
}

#contentCon > #show > .right > ul > .love {
    width: 38px;
    height: 38px;
    border: 1px solid #d2d2d2;
    margin-left: 20px;
}

#contentCon > #details {
    margin-top: 90px;
}
</style>